<template>
  <div class="content-container" style="padding: 0 40px">
    <div style="width: 100%">
      <el-form inline>
        <el-form-item label="起始日期">
          <span class="input-box">
            <el-date-picker
              v-model="formData.start"
              type="date"
              placeholder="请选择日期"
              :clearable="false"
              style="width: 100%"
            />
          </span>
        </el-form-item>
        <el-form-item label="截止日期">
          <span class="input-box">
            <el-date-picker
              v-model="formData.end"
              type="date"
              placeholder="请选择日期"
              :clearable="false"
              style="width: 100%"
            />
          </span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" link @click="handleQuery">
            <el-icon><Search /></el-icon>
            <span>检索</span>
          </el-button>
          <el-button
            type="success"
            link
            @click="exportExcel"
            v-if="tableData.length > 0"
          >
            <el-icon><Download /></el-icon>
            <span>保存</span></el-button
          >
        </el-form-item>
      </el-form>
      <el-table style="width: 100%" :data="tableData" :height="tableHeight">
        <el-table-column prop="number" label="#" min-width="40" />
        <el-table-column label="姓名" min-width="80">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><user /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.visitorName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="来访时间" min-width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><Clock /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.enterTime }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="离开时间" min-width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><Clock /></el-icon>
              <span style="margin-left: 10px">{{ scope.row.leaveTime }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="来访时长" min-width="80">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span style="margin-left: 10px">{{
                scope.row.visitDuration
              }}</span>
              <span>&nbsp;分钟</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import dayjs from "dayjs";
import * as XLSX from "xlsx";
import useCommonStore from "@/store/common.js";

const commonStore = useCommonStore();
// const darkMode = computed(() => commonStore.darkMode);

const formData = ref({
  start: new Date(),
  end: new Date(),
});

const handleQuery = () => {
  let input = {
    start: dayjs(formData.value.start).format("YYYY-MM-DD") + " 00:00:00",
    end: dayjs(formData.value.end).format("YYYY-MM-DD") + " 23:59:59",
  };
  console.log("journalVisit", input);
  axios
    .post("api/journal_visit.php", {
      action: "query",
      input,
    })
    .then((res) => {
      console.log("handleQuery", res);
      if (res.data) {
        tableData.value = res.data;
        ElMessage.success(`检索到${res.data.length}条来访记录`);
      } else {
        ElMessage.warning("检索到0条来访记录");
      }
    })
    .catch((err) => {
      ElMessage.error("检索来访记录出错");
      console.log("检索来访记录出错", err);
    });
};

const tableData = ref([]);
const tableHeight = computed(() => commonStore.clientHeight - 135 - 240);

const createWs = (data, fields, titles) => {
  const ws = XLSX.utils.json_to_sheet(data, {
    header: fields,
  });
  const range = XLSX.utils.decode_range(ws["!ref"]);
  for (let c = range.s.c; c <= range.e.c; c++) {
    const header = XLSX.utils.encode_col(c) + "1";
    ws[header].v = titles[ws[header].v];
  }
  return ws;
};

const exportExcel = () => {
  let ws = createWs(
    tableData.value,
    ["number", "visitorName", "enterTime", "leaveTime", "visitDuration"],
    {
      number: "编号",
      visitorName: "姓名",
      enterTime: "来访时间",
      leaveTime: "离开时间",
      visitDuration: "来访时长",
    }
  );

  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "来访记录");
  const fileName =
    `CDTCC-2KT来访记录（${formData.value.start}至${formData.value.end}）@` +
    dayjs().format("YYYY_MM_DD_HH_mm_ss");
  XLSX.writeFile(wb, fileName + ".xlsx");
};
</script>

<style scoped>
@import "@/styles/vibrate.css";
@import "./scopeStyle.css";

.input-box {
  min-width: 150px;
  width: 15vw;
}
</style>
